<template>
  <div class="vul-pagination">
    <div v-if="showAllchecked">选择了{{ selectTotal }}条</div>
    <div v-if="showAllTip" class="all-read" @click="allChangeTip">
      标记全部已读
    </div>
    <div v-if="showMatchAssets">
      <el-checkbox v-model="checkedMatch">{{
        showMatchAssetsText
      }}</el-checkbox>
    </div>

    <div></div>
    <el-pagination
      :small="isSmall"
      :page-size="pageSize"
      :total="total"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20, 50, 100]"
      :layout="layout"
      @current-change="onPageChange"
      @size-change="onPageSizeChange"
    ></el-pagination>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits, ref, watch } from 'vue';
const emit = defineEmits([
  'handleCheckedMatch',
  'handleSizeChange',
  'handleCurrentChange',
  'allChangeTip',
  'handleSelectAll',
]);
const props = defineProps({
  isSmall: {
    type: Boolean,
    default: false,
  },
  total: {
    // 总页数
    type: Number,
    default: 0,
  },
  checkall: {
    type: Boolean,
    default: false,
  },
  currentPage: {
    // 当前页
    type: Number,
    default: 1,
  },
  layout: {
    // 组件布局
    type: String,
    default: 'total, sizes, prev, pager, next, jumper',
  },
  pageSize: {
    // 每页显示条数
    type: Number,
    default: 10, // 默认10条
  },
  selectTotal: {
    type: Number,
    default: 0,
  },
  showAllchecked: {
    type: Boolean,
    default: false,
  },
  showAllTip: {
    type: Boolean,
  },
  showMatchAssets: {
    type: Boolean,
  },
  showMatchAssetsText: {
    type: String,
    default: '',
  },
});
const checked = ref(false);
const checkedMatch = ref(false);

watch(
  checkedMatch,
  (newValue, oldValue) => {
    emit('handleCheckedMatch', newValue);
  },
  { deep: true },
);

const onPageSizeChange = (pageSize) => {
  emit('handleSizeChange', pageSize);
};
const onPageChange = (currentPage) => {
  emit('handleCurrentChange', currentPage);
};
const allChangeTip = () => {
  emit('allChangeTip', {});
};
const changeCheck = (v) => {
  emit('handleSelectAll', v);
};
</script>
<style lang="scss" scoped>
.vul-pagination {
  margin: 15px 0;
  @include flexBox($justifyContent: flex-end);
}
</style>
